<script setup lang="ts">
import type { FormRules, FormInstance } from "element-plus";
import useUserStore from "@/stores/user.ts";
import router_config from "@/router/router_config.ts";

const useUserInfo = useUserStore();
const router = useRouter();

const redirect = ref("");
watch(
  () => router.currentRoute.value.path,
  (_) => {
    const query = router.currentRoute.value.query;
    redirect.value =
      (query && (query.redirect as string)) || router_config.defaultRoute;
  },
  { immediate: true }
);

interface RuleForm {
  username: string;
  password: string;
}

const loginFormRef = ref<FormInstance>();
const loginForm = reactive<RuleForm>({
  username: "admin",
  password: "123456",
});

const loginRules = reactive<FormRules<typeof loginForm>>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 20, message: "长度必须在1到20之间", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 1, max: 20, message: "长度必须在1到20之间", trigger: "blur" },
  ],
});

let loading = ref(false);

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      const isLogin = await useUserInfo.login(loginForm);
      loading.value = false;
      if (isLogin) {
        router.push({
          path: redirect.value,
        });
      }
    }
  });
};
</script>

<template>
  <div class="flex justify-center items-center h-full bg-[#333]">
    <div class="w-1000 h-474.38 rounded-lg flex">
      <img src="@/assets/images/login/login-l.png" alt="login" />
      <div
        class="bg-white w-40% rounded-tl-0 rounded-bl-0 rounded-tr-[8px] rounded-br-[8px] flex justify-center items-center"
      >
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-width="50px"
        >
          <div class="flex justify-center items-center m-b-40">
            <img
              src="@/assets/images/login/logo.png"
              class="w-139 h-42"
              alt="logo"
            />
          </div>
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              placeholder="账号"
              clearable
              maxlength="20"
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <i-ep-user />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              maxlength="20"
              show-password
              @keyup.enter.native="handleLogin"
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <i-ep-lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              class="h-60 w-full rounded-17 p-x-11 p-y-20 font-500"
              @click.native.prevent="handleLogin(loginFormRef)"
            >
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
